import React, { useState, useRef, useEffect } from 'react';
import { View, Text, TouchableOpacity, Animated, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { onePx, px2dp } from '~/utils/px2dp';

// 定义 Option 的类型
interface Option {
    val: number;
    label: string;
}

// 定义组件的 Props 类型
interface DropdownProps {
    options: Option[]; // 选项列表
    onSelect: (selected: Option) => void; // 选择回调
    style?: StyleProp<ViewStyle>; // 容器样式
    optionStyle?: StyleProp<ViewStyle>; // 选项样式
    textStyle?: StyleProp<TextStyle>; // 文本样式
    iconColor?: string; // 图标颜色
}

const Dropdown: React.FC<DropdownProps> = ({
    options,
    onSelect,
    style,
    optionStyle,
    textStyle,
    iconColor = '#000',
}) => {
    const [isOpen, setIsOpen] = useState(false);
    const [selectedOption, setSelectedOption] = useState<Option | null>(null);
    const animation = useRef(new Animated.Value(0)).current;

    // 初始化时默认选中第一项
    useEffect(() => {
        if (options.length > 0) {
            setSelectedOption(options[0]);
            onSelect(options[0]); // 默认选中第一项时触发回调
        }
    }, [options]);

    // 切换下拉框的展开和收起
    const toggleDropdown = () => {
        const toValue = isOpen ? 0 : 1;
        Animated.timing(animation, {
            toValue,
            duration: 300,
            useNativeDriver: false,
        }).start();
        setIsOpen(!isOpen);
    };

    // 处理选项选择
    const handleOptionPress = (option: Option) => {
        setSelectedOption(option);
        onSelect(option);
        toggleDropdown();
    };

    // 插值动画高度
    const heightInterpolate = animation.interpolate({
        inputRange: [0, 1],
        outputRange: [0, options.length * 50], // 50 是每个选项的高度
    });

    return (
        <View style={[styles.container, style]}>
            <TouchableOpacity style={styles.header} onPress={toggleDropdown}>
                <Text style={[styles.headerText, textStyle]}>
                    {selectedOption ? selectedOption.label : 'No options available'}
                </Text>
                <Icon name={isOpen ? 'caret-up-outline' : 'caret-down-outline'} size={px2dp(30)} color={iconColor} />
            </TouchableOpacity>
            <Animated.View style={[styles.dropdown, { height: heightInterpolate }]}>
                {options.map((option) => (
                    <TouchableOpacity
                        key={option.val}
                        style={[styles.option, optionStyle]}
                        onPress={() => handleOptionPress(option)}>
                        <Text style={[styles.optionText, textStyle]}>{option.label}</Text>
                    </TouchableOpacity>
                ))}
            </Animated.View>
        </View>
    );
};

// 样式
const styles = StyleSheet.create({
    container: {
        alignSelf: 'center',
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: px2dp(6),
    },
    headerText: {
        fontSize: px2dp(28),
        color: '#000',
    },
    dropdown: {
        overflow: 'hidden',
        borderRadius: px2dp(12),
        marginTop: px2dp(12),
    },
    option: {
        padding: px2dp(24),
        borderBottomWidth: onePx,
        borderBottomColor: '#ccc',
    },
    optionText: {
        fontSize: px2dp(24),
        textAlign: 'center',
    },
});

export default Dropdown;
